<div class="form-group">
  <label for="sel1">Select User</label>
  <select class="form-control" id="userId" onchange="userChangeHandler(this.value)">
  </select>
</div>

<div class="form-group">
  <label for="sel1">Select Address</label>
  <select class="form-control" id="globalKeystoreId" onchange="keyChangeHandler(this.value)">
  </select>
</div>

<script>

var globalUser;
var globalAddress;
var globalPassword;

function userChangeHandler(user) {
  console.log('user is now: ' + user);
  globalUser = user;
  
  $.getJSON( "/users/" + user, function( data ) {
      $('#globalKeystoreId').empty();
			 
      $.each( data, function( key, val ) {
          $('#globalKeystoreId')
              .append($('<option>', { key : val })
	      .text(val));
				      
      });

      keyChangeHandler($('#globalKeystoreId').val());
  });
}

function keyChangeHandler(address) {
  globalAddress = address;
  $('#passwordModal').modal('show');
  afterTX();
}

function loadHandler() {
   $.getJSON( "/users/", function( data ) {
      $.each( data, function( key, val ) {
          console.log("iterating over data, key: " + key + " val: " + val);

          $('#userId')
              .append($('<option>', { key : val })
	      .text(val));
			 
      });

      userChangeHandler(data[0]);
   });
}

$( document ).ready( function () {
    loadHandler();
});

</script>
  